<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="content">
        <div class="cloud"></div>
    </div>
</body>
<script>
    function rain(){
        let cloud = document.querySelector('.cloud');
        let e = document.createElement('div');
        let left = Math.floor(Math.random() * 310);
        let width = Math.random() * 5;
        let height = Math.random() * 50;
        let duration = Math.random() * 0.5;

        e.classList.add('drop');
        cloud.appendChild(e);
        e.style.left = left + 'px';
        e.style.width = 0.5+width + 'px';
        e.style.height = 0.5+height + 'px';
        e.style.animationDuration = 1+duration + 's';


        setTimeout(function(){
            cloud.removeChild(e)
        },2000)
    }


    setInterval(function(){
        rain()
    },20)
</script>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #1b1b1b;
    }
    .content{
        position: relative;
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
        border-bottom: 1px solid rgba(225,225,225,0.1);
    }
    .content .cloud{
        position: relative;
        width: 320px;
        height: 100px;
        /* background: #fff; */
        border-radius: 100px;
        filter: drop-shadow(8px 8px 0 #0005);
        animation: animateCloud 2s steps(1) infinite;
    }

    @keyframes animateCloud{
        0%{
            filter: drop-shadow(8px 8px 0 #0005) drop-shadow(0 0 0 #fff) brightness(1);
        }
        95%{
            filter: drop-shadow(8px 8px 0 #0001) drop-shadow(0 0 50px #fff5) brightness(10);
        }
    }

    .content .cloud::before{
        content: '';
        position: absolute;
        top: -50px;
        left: 40px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: #484f59;
        box-shadow: 90px -10px 0 30px #484f59;
    }

    .content .cloud::after{
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        background: #484f59;
        z-index: 1000;
    }

    .content .cloud .drop{
        position: absolute;
        top: 40px;
        background: #05a2eb;
        width: 2px;
        height: 10px;
        transform-origin: bottom;
        animation: animate 2s linear infinite;
    }
    @keyframes animate{
        0%{
            transform: translateY(0) scaleY(1);
        }
        70%{
            transform: translateY(360px) scaleY(1);

        }
        80%{
            transform: translateY(360px) scaleY(0.2);
        }
        100%{
            transform: translateY(360px) scaleY(0) scaleX(15);
        }
    }
</style>
</html>